<template>
	<div class="video">
		<section class="v_list">
			<div class="v_item" v-for="item in videoList">
				<a href="#" class="v_conent">
					<h3 class="v_title">{{item.title}}</h3>
					<div class="v_pic">
						<img :src="item.large_image_url"/>
						<div class="v_btn"></div>
					</div>
					<div class="v_info">
						<span class="gg_label" v-if="item.label=='广告'">广告</span>
						<span class="v_space">{{item.source}}</span>
						<span class="v_space">评论 {{item.comment_count}}</span>
						<span class="v_space">2小时前</span>
					</div>
				</a>
			</div>
		</section>
	</div>
</template>

<script>
	import axios from 'axios'
	export default{
		mounted(){
			this._getVideo()
			//console.log(this.$route.query.id)
		},
		data(){
			return {
				videoList:[]
			}
		},
		methods:{
			_getVideo(){
				axios({
					method:'get',
					url:"/video"
				}).then((res)=>{
					this.videoList=res.data.data
					console.log([res.data.data])
				})
			}
		}
	}
</script>

<style lang="scss">
	@import"~scss/common";
	.video{
		text-align: left;
		padding-top: r(160px);
		.v_list{
			padding: 0 r(30px);
			width: 100%;
			.v_item{
				padding: r(32px) 0;
			    border-bottom: 1px solid rgba(221, 221, 221, 0.6);
			    width: 100%;
				.v_conent{
					display:block;
					position:relative;
					margin-top:r(12px);
					width: 100%;
					.v_title{
						position: absolute;
						left: 0;
						top: 0;
						font-weight: 400;
						color:#fff;
						margin: r(10px) r(20px);
						font-size: r(28px);
					    overflow: hidden;
    					text-overflow: ellipsis;
    					line-height: r(42px);
					}
					.v_pic{
						height: r(387.8px);
						img{
							width: 100%;
							height: 100%;
							display: block;
						}
						.v_btn{
							position: absolute;
							width: 100%;
							height: 100%;
							left: 0;
							top: 0;
							background: url(~img/v_btn.png) no-repeat center center;
						    background-size: r(100px);
						}
					}
					.v_info{
						margin-top: r(12px);
						.v_space{
							margin-right: r(10px);
		                    line-height: r(24px);
		                    font-size: r(20px);
		                    vertical-align: middle;
		                    display: inline-block;
		                    color: #999;
						}
						.gg_label{
							display: inline-block;
							margin-right: r(10px);
							width: r(50px);
							line-height: r(24px);
							vertical-align: middle;
						    color: #2a90d7;
    						border: 1px solid rgba(42, 144, 215, 0.5);
							border-radius: r(4px);
							text-align: center;
							font-size: r(18px);
						}
					}
				}
			}
		}
	}
</style>